<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue实践 图书管理2</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
    <script>
        var app;
        var books = [{
            id: 1,
            author: '曹雪芹',
            name: '红楼梦',
            price: 32.0
        }, {
            id: 2,
            author: '施耐庵',
            name: '水浒传',
            price: 30.0
        }, {
            id: '3',
            author: '罗贯中',
            name: '三国演义',
            price: 24.0
        }, {
            id: 4,
            author: '吴承恩',
            name: '西游记',
            price: 20.0
        }];
        window.onload = function () {
            app = new Vue({
                el: '#app',
                data: {
                    book: {
                        id: '',
                        name: '',
                        author: '',
                        price: ''
                    },
                    books: books,
                },
                methods: {
                    addBook: function () {
                        this.book.id = this.books.length + 1;
                        this.books.push(this.book);
                        this.book = {};
                        console.log(this.books.length);
                    },
                    searchBook: function () {

                    },
                    updateBook: function (book) {

                    },
                    delBook: function (book) {

                    },
                    selected: function(book){
                        this.book.id = book.id;
                        this.book.name = book.name;
                        this.book.author = book.author;
                        this.book.price = book.price;
                    }
                }
            })
        }
    </script>
</head>

<body>
    <div id="app" class="container">
        <table id="books" class="table table-sm table-hover">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>书名</th>
                    <th>作者</th>
                    <th>价格</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="book in books" id="{{book.id}}" @click="selected(book)">
                    <td>{{book.id}}</td>
                    <td>{{book.name}}</td>
                    <td>{{book.author}}</td>
                    <td>{{book.price}}</td>
                    <td class="text-left">
                        <button type="button" class="btn btn-success" @click="updateBook(book)">修改</button>
                        <button type="button" class="btn btn-danger" @click="delBook(book)" class="del">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div id="add-book">
            <legend>添加书籍</legend>
            <div class="form-group">
                <label for="name">书名</label>
                <input type="text" class="form-control" id="name" v-model="book.name">
            </div>
            <div class="form-group">
                <label for="author">作者</label>
                <input type="text" class="form-control" id="author" v-model="book.author">
            </div>
            <div class="form-group">
                <label for="price">价格</label>
                <input type="text" class="form-control" id="price" v-model="book.price">
            </div>
            <button class="btn btn-primary btn-block" v-on:click="addBook()">添加</button>
            <button class="btn btn-primary btn-block" v-on:click="searchBook()">查找</button>
        </div>
    </div>
</body>

</html>